@ReadCard: ReadCard;

.@{ReadCard}-wrapper {
  min-height: 810px;

  .@{ReadCard} {
    height: 100%;
    display: flex;
    align-items: center;

    &-text {
      min-height: 424px;

      >*.queue-anim-leaving {
        position: relative !important;
      }

      .title-h1 {
        position: relative;
        margin: 0 0 16px;
        text-align: left;
        font-size: 2em;
        font-weight: bold;
      }

      .title-content {
        position: relative;
        margin-bottom: 64px;
        text-align: left;
      }

      ul {
        position: relative;
        display: inline-block;

        li {
          margin-bottom: 24px;

          .@{ReadCard}-icon {
            display: inline-block;
            width: 32px;
            font-size: 32px;
            color: #1890ff;
            position: absolute;

          }

          .@{ReadCard}-title,
          .@{ReadCard}-content {
            margin-left: 45px;

            div div {
              margin-bottom: 5px;
            }

          }

          .@{ReadCard}-title {
            font-size: 18px;
            margin-bottom: 10px;

            a {
              margin-left: 20px;
            }
          }
        }
      }


      img.img-spin {
        display: inline-block;
        animation: loadingCircle3 1s infinite linear;
      }

      .download_button {

        display: flex;
        justify-content: start;

        .button {
          width: 200px;
          height: 50px;
          font-size: 20px;
          font-weight: bold;
          display: flex;
          align-items: center;
          flex-direction: row;
          justify-content: center;
        }
      }



    }
  }
}


@keyframes loadingCircle2 {
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}


@keyframes loadingCircle3 {


  0% {
    transform: translate(20%, -10%) rotate(180deg);
  }


  30% {
    transform: translate(-30%, 40%) rotate(80deg);
  }

  60% {
    transform: translate(-30%, 40%) rotate(80deg);
  }


  100% {
    transform: translate(20%, -10%) rotate(180deg);
  }
}

@media screen and (max-width: 767px) {
  .@{ReadCard}-wrapper {
    height: 860px;
    overflow: hidden;

    .@{ReadCard} {
      display: block;

      &-img,
      &-text {
        display: block;
        width: 100%;
      }

      &-text {

        >h1,
        >p {
          text-align: center;
        }

        >h1 {
          margin: 56px auto 16px;
        }

        p {
          margin-bottom: 32px;
        }
      }

      &-img {
        margin-top: 20px;
      }
    }
  }
}